<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
</head>
<body>
    <script src="../vue@2.6.14.min.js"></script>
    <div id="app">
        <h3>demo1: 绑定input输入框 type="text"</h3>
        <p>初始值和input中的value值无关，而是取决于vm中的值</p>
        <input type="text" v-model="msg1">
        <p>当前输入的值为： {{msg1}}</p>

        <h3>demo2: 单选框</h3>
        <p>当前选择的选项是： {{msg2}}</p>
        <input type="radio" value="A" v-model="msg2" id="A">
        <label for="A">A</label>
        <input type="radio" value="B" v-model="msg2" id="B">
        <label for="B">B</label>
        <input type="radio" value="C" v-model="msg2" id="C">
        <label for="C">C</label>

        <h3>demo3: 多选框</h3>
        <p>需要注意的是，多选框的msg3的值是一个数组。被选择到的值会加入到数组中</p>
        <p>当前选择的选项是： {{msg3}}</p>
        <input type="checkbox" v-model="msg3" id="A" value="A">
        <label for="A">A</label>
        <input type="checkbox" v-model="msg3" id="B" value="B">
        <label for="B">B</label>
        <input type="checkbox" v-model="msg3" id="C" value="C">
        <label for="C">C</label>
        <input type="checkbox" v-model="msg3" id="D" value="D">
        <label for="D">D</label>

        <h3>demo4: 多行文本</h3>
        <p>用法和input的type="text"方法是一样的</p>
        <textarea v-model="msg4"></textarea>
        <p>当前输入的文本内容是：{{msg4}}</p>

        <h3>demo5: 选择框</h3>
        <p>当前的选项是: {{msg5}}</p>
        <select v-model="msg5">
            <option value="" disabled>请选择城市--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
            <option value="深圳">深圳</option>
        </select>

        <h3>demo6: 修饰符.lazy，表示在输入框失去焦点或按了enter键之后，才会把输入的值更新给变量。而不是实时的更新输入的数据</h3>
        <input type="text" v-model.lazy="msg6">
        <p>当前输入的值为： {{msg6}}</p>

        <h3>demo7: 修饰符.number，表示当输入的内容能被parseFloat解析时，就会把输入的内容转换为数字类型。 如果内容不能被它解析，则返回输入的完整值</h3>
        <input type="text" v-model.number="msg7">
        <p>当前输入的值为： {{msg7}}</p>

        <h3>demo8: 修饰符.trim，表示去掉输入内容的前后空格作为最终的返回值</h3>
        <input type="text" v-model.trim="msg8">
        <p>当前输入的值为： {{msg8}}</p>
    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    msg1: '初始值',
                    msg2: '',
                    msg3: [],
                    msg4: '',
                    msg5: '',
                    msg6: '',
                    msg7: '',
                    msg8: '',
                }
            }
        })
    </script>
    <h3>
        <ol>
            <li>
                v-model是一个双向数据绑定的指令，用于input、textarea、select等表单控件，以及component组件。
            </li>
            <li>
                语法：<br>
                v-model:value="变量"<br>
                由于v-model默认绑定的就是表单中的value值，所以还有一种简写方法：<br>
                v-model="变量"
            </li>
        </ol>
    </h3>
</body>
</html>